<template>
  <div>
    <div >
      <div class="weui-cells">
        <div class="weui-cell">
          <svg class="icon iconMargin" aria-hidden="true">
            <use xlink:href="#iconbenpao"></use>
          </svg>
          <span class="time">{{startTime}}</span>- <span class="time">{{endTime}}</span>
        </div>
        <el-divider></el-divider>
        <div class="row">
          <span class="v-center">
            <svg class="icon taskIcon" aria-hidden="true">
              <use xlink:href="#iconwancheng"></use>
            </svg>
            成果
          </span>
        </div>
        <el-divider></el-divider>
        <div v-for="item of gainList" :key="item.id"  v-if="item.state === GainYes">
          <div class="row">
          <span class="taskName">
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icondian3"></use>
            </svg>
            {{item.name}}
          </span>
            <span class="delIcon">
            <svg class="icon tongguoIcon" aria-hidden="true">
              <use xlink:href="#icontongguo1"></use>
            </svg>
          </span>
          </div>
          <el-divider></el-divider>
        </div>
        <div v-for="item of gainList" :key="item.id"  v-if="item.state === GainWaitForCheck">
          <div class="row">
          <span class="taskName gainWaitForCheck">
            <svg class="icon projectIcon" aria-hidden="true">
              <use xlink:href="#icondian3"></use>
            </svg>
            {{item.name}}
          </span>
            <span class="delIcon gainWaitForCheck">
            待审核
          </span>
          </div>
          <el-divider></el-divider>
        </div>
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'paceMissionDetail',
  props: {
    mission: Object
  },
  data () {
    return {
      gainList: [],
      startTime: sessionStorage.getItem('missionStartTime'),
      endTime: sessionStorage.getItem('missionEndTime')
    }
  },
  methods: {
    getGainList () {
      axios.get(this.url + '/gain/mission/' + sessionStorage.getItem('missionID'))
        .then(this.getGainListSucc)
    },
    getGainListSucc (res) {
      if (res.status === 200) {
        res = res.data
        this.gainList = res
      }
    }
  },
  mounted () {
    this.getGainList()
  }
}
</script>

<style lang="stylus" scoped>
  .cellMargin
    margin-left .7rem
  .nameMargin
    margin-right .5rem
  .textColor
    color #757575
  .buttonShow
    size larger
    background  #16b0ff
    color #fff
  .taskName
    margin-left .2rem
  .row
    margin-top .6rem
    margin-bottom .6rem
  .taskIcon
    margin-right .5rem
    color #16b0ff
  .delIcon
    float right
    margin-right .5rem
  .projectIcon
    margin-right .2rem
  .addTaskIcon
    float: right
    font-size 19.9px
    margin-right .9rem
    margin-top .18rem
    color black
  .tongguoIcon
    font-size 29px
  .gainWaitForCheck
    color #7a7b6a
  .gainNo
    color red
  .iconMargin
    margin-right .2rem
  .time
    font-size 18px
    margin-left  0.5rem
    margin-right .5rem
    color #757575
</style>
